<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="我的E币" />
      <view class="ecoin-header">
        <view class="ecoin-header-left">
          <view class="ecoin-label">我的E币</view>
          <view class="ecoin-balance">{{ list.total_ecoins }}</view>
        </view>
        <view class="ecoin-header-right">
          <view class="ecoin-unsettled-label">未入账：</view>
          <view class="ecoin-unsettled">{{ list.not_credited }}</view>
        </view>
        <view class="ecoin-bg"></view>
      </view>

      <!-- E币明细列表 -->
      <view v-for="(item, idx) in list?.events?.data" :key="idx" class="ecoin-card">
        <!-- <image :src="item.img" class="ecoin-img" /> -->
        <image :src="item.avatar" class="ecoin-img " />
        <view class="ecoin-info">
          <view class="ecoin-title">{{ item.item_name }}</view>
          <view class="ecoin-meta">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            比赛日期：{{ formatTimeOnly(item.competition_time) }}
          </view>
          <view class="ecoin-meta">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            成绩：{{ item.score }}
          </view>
          <view class="ecoin-meta">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            地址：{{ item.address }}
          </view>
          <view class="ecoin-footer">
            <view class="ecoin-distance">
              <text class="ecoin-distance-icon">🧭</text>
              <text class="ecoin-distance-text">{{ item.juli ? (item.juli/1000 ).toFixed(2) : '0.00' }}km</text>
            </view>
          </view>
        </view>
        <view class="ecoin-amount">+{{ item.ecoin }}</view>
      </view>
    </view>

  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { formatTimeOnly } from '@/utils/dateUtils.js'
  import { onShow } from '@dcloudio/uni-app';
  import { useRequest } from '@/api';
  const { API_MEMBER_MYECOIN_POST } = useRequest();
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const balance = ref('13243,00')
  const unsettled = ref(100)
  const list = ref({})
  onShow(() => {
    getMyEcoin()
  })
  const getMyEcoin = async () => {
    let params = {
      page: 1,
      page_size: 10
    }
    list.value = {}
    try {

      const res = await API_MEMBER_MYECOIN_POST(params)
      console.log('getMyEcoin', res)

      if (res.code === 1) {
        if (res.data ) {
          list.value = res.data;
        } else {
          list.value = {};
        }
        console.log('list', list.value);
        
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('list', list.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>

</style>